<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/view/include/taglib.jsp"%>
<html lang="cn" class="app">
<head>
    <meta charset="utf-8" />
    <title>${dict:getConfigValueByKey('WEB_NAME','管理平台')} | 字典管理</title>
    <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="icon" type="image/png" href="icon.png">
    <link rel="apple-touch-icon-precomposed" href="icon.png">
    <link rel="stylesheet" href="${ctxStatic}/js/jPlayer/jplayer.flat.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/animate.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/simple-line-icons.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/font.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/app.css" type="text/css" />
    <%--<link rel="stylesheet" href="${ctxStatic}/js/page/paging.css" type="text/css" />--%>
    <!--[if lt IE 9]>
    <script src="${ctxStatic}/js/ie/html5shiv.js"></script>
    <script src="${ctxStatic}/js/ie/respond.min.js"></script>
    <script src="${ctxStatic}/js/ie/excanvas.js"></script>
    <![endif]-->
</head>
<body>
<section class="scrollable wrapper">
    <div class="row">
        <div class="col-lg-12">
            <!-- 引导开始 -->
            <ul class="breadcrumb">
                <li><a href="${ctx}/welcome"><i class="fa fa-home"></i> 主页</a></li>
                <li>系统设置</li>
                <li class="active">字典管理</li>
                <li class="active">字典编辑</li>
            </ul>
            <!-- 引导结束 -->
        </div>
    </div>
    <form id="submitForm" class="bs-example form-horizontal" method="post" >
    <section class="panel panel-default">
        <%--字典基本信息--%>
            <section class="panel panel-default">
                <header class="panel-heading font-bold">字典详情</header>
                <div class="panel-body">
                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 col-sm-2  control-label">代码：</label>
                            <div class="col-lg-10 col-md-10 col-sm-10">
                                <input type="hidden" name="id" value="${dict.id}"/>
                                <input type="text" id="value" name="value" class="form-control" value="${dict.value}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 col-sm-2 control-label">名称：</label>
                            <div class="col-lg-10 col-md-10 col-sm-10">
                                <input type="text" id="label" name="label" class="form-control" value="${dict.label}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 col-sm-2 control-label">序号：</label>
                            <div class="col-lg-10 col-md-10 col-sm-10">
                                <input type="text" id="sort" name="sort" class="form-control" value="${dict.sort}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 col-sm-2 control-label">备注：</label>
                            <div class="col-lg-10 col-md-10 col-sm-10">
                                <input type="text" name="remarks" class="form-control" value="${dict.remarks}">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-10 col-md-10 col-sm-10">
                                <button type="button" class="btn btn-s-md btn-info" onclick="submitForm()">保存</button>
                                <button type="button" class="btn btn-s-md btn-danger" onclick="closeSelfModel()">关闭</button>
                            </div>
                        </div>
                </div>

            </section>


        <%--操作区域 开始--%>
        <div class="row wrapper">
            <div class="col-sm-5 m-b-xs">
                <button onclick="addDictItem();" class="btn btn-sm btn-default">新增数据项</button>
            </div>
            <div class="col-sm-4 m-b-xs">

            </div>
            <%--搜索区域--%>
            <div class="col-sm-3">

            </div>
        </div>
        <%--操作区域 结束--%>

        <div class="table-responsive">
            <table id="contentTable" class="table table-striped b-t b-light">
                <thead>
                <tr>
                    <th class="text-center" width="20%">代码</th>
                    <th class="text-center" width="20%">名称</th>
                    <th class="text-center" width="10%">排序</th>
                    <th class="text-center" width="20%">备注</th>
                    <th class="text-center" width="30%">操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${dictItemList }" var="dictItem" varStatus="itemIndex">
                    <tr>
                        <td><input type="text" name="dictItemList[${itemIndex.index }].value" placeholder="代码" value="${dictItem.value}" class="form-control" required/></td>
                        <td><input type="text" name="dictItemList[${itemIndex.index }].label" placeholder="名称" value="${dictItem.label}" class="form-control" required/></td>
                        <td><input type="number" name="dictItemList[${itemIndex.index }].sort" placeholder="排序" value="${dictItem.sort}" class="form-control" required/></td>
                        <td><input type="text" name="dictItemList[${itemIndex.index }].remarks" placeholder="备注" value="${dictItem.remarks}" class="form-control" /></td>
                        <td class="text-center"><a href="javascript:void(0)" onclick="delParent(this)" title="删除" class="btn btn-s-md btn-danger">删除</a></td>
                    </tr>
                </c:forEach>
                </tbody>

            </table>
        </div>
    </section>
    </form>
</section>

</body>
<script src="${ctxStatic}/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="${ctxStatic}/js/bootstrap.js"></script>
<!-- App -->
<script src="${ctxStatic}/js/app.js"></script>
<script src="${ctxStatic}/js/slimscroll/jquery.slimscroll.min.js"></script>
<script src="${ctxStatic}/js/app.plugin.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/jPlayer/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/jPlayer/add-on/jplayer.playlist.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/jPlayer/demo.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/tools.js?version=${ctxVersion}"></script>
<script type="text/javascript" src="${ctxStatic}/js/page/paging.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/layer/layer.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/tmpl/jquery.tmpl.js"></script>

<script>
    $(function(){
        var msg = '${msg}';
        if(msg!=''){
            showMsg(msg);
            closeModel(true);//关闭窗口
        }
    })

    var sortIndex = $("#contentTable tbody tr").size();

    <%--添加明细--%>
    function addDictItem(){
        var trHtml = '';
        trHtml+='<tr>';
        trHtml+='<td><input type="text" name="dictItemList['+sortIndex+'].value" placeholder="代码" value="" class="form-control"  required/></td>';
        trHtml+='<td><input type="text" name="dictItemList['+sortIndex+'].label" placeholder="名称" value="" class="form-control"  required/></td>';
        trHtml+='<td><input type="number" name="dictItemList['+sortIndex+'].sort" placeholder="排序" value="1" class="form-control"  required/></td>';
        trHtml+='<td><input type="text" name="dictItemList['+sortIndex+'].remarks" placeholder="备注" value="" class="form-control" /></td>';
        trHtml+='<td class="text-center"><a href="javascript:void(0);" onclick="delParent(this)" title="删除" class="btn btn-s-md btn-danger">删除</a></td>';
        trHtml+='</tr>';
        $("#contentTable tbody").append(trHtml);
        sortIndex++;
    }
    <%--删除选中的明细--%>
    function delParent(dom){
        layer.confirm('确认要删除该条数据吗？', {
            btn: ['是','否']
        }, function(){
            $(dom).parent().parent().remove();
            layer.msg('已移除，需要点击保存生效！', {icon: 1});
        }, function(){

        });

    }


    /**保存人员信息 */
    function submitForm(){
        if(isBlankCheck("value,label,sort","代码,名称,序号")){
            var loadingLayer = layer.load(1, {shade: [0.1,'#fff']});//loading
            //根据项目标识获取目录
            $.ajax({
                type: 'post',
                url: '${ctx}/sys/dict/<c:choose><c:when test="${empty dict.id}">create</c:when><c:otherwise>update</c:otherwise></c:choose>.json?timeStamp='+new Date().getTime(),
                dataType:"json",
                data: $("#submitForm").serialize(),
                success: function (data) {
                    layer.close(loadingLayer);
                    showMsg(data.desc);
                },error:function(){
                    layer.close(loadingLayer);
                    showMsg("点击过快或程序异常");
                }
            });
        }
    }

    /** 关闭当前弹出框并执行 */
    function closeSelfModel(){
        var index = parent.layer.getFrameIndex(window.name);
        parent.searchPage(1);//执行父页面的搜索功能
        parent.layer.close(index);
    }

    <%--&lt;%&ndash;//删除&ndash;%&gt;--%>
    <%--function deleteItem(id){--%>
        <%--layer.confirm('确认删除该数据？', {--%>
            <%--btn: ['是','否'],--%>
            <%--skin: 'layui-layer-molv'--%>
        <%--}, function(){--%>
            <%--$.ajax({--%>
                <%--type: 'post',--%>
                <%--url: '${ctx}/sys/dict/deleteItem.json',--%>
                <%--dataType:"json",--%>
                <%--data: {"id":id},--%>
                <%--success: function (data) {--%>
                    <%--if(data.ret==1){--%>
                        <%--layer.msg('删除成功');--%>
                    <%--}else{--%>
                        <%--layer.msg('删除失败：'+data.desc);--%>
                    <%--}--%>
                    <%--searchPage(1);--%>
                <%--}--%>
            <%--});--%>
        <%--}, function(){--%>

        <%--});--%>
    <%--}--%>

</script>
</html>
